<template>
  <div>
    <div style="padding-top:50px">
      <el-tabs type="border-card">
  <el-tab-pane label="员工分布">
    <el-row :gutter="20">
        <el-col :span="20">
          <div style="padding:50px">
      <eacher :items="items" :pieName="name" :pirRad="rad" class="each" title legendShow titleText="各部门" titleSub="成员人数"></eacher>
    </div>
        </el-col>
            <el-col :span="4">
          <div>
            <h3>男女比例</h3>
             <div>326/55</div>
          </div>
        </el-col>
        </el-row>
  </el-tab-pane>
  <el-tab-pane label="年度效益" type="el-icon-s-marketing">
    <div style="display: flex;justify-content: space-around;">
      <Eachers :items="items2" :nameX="name2" class="each" titleText="年度效益图" titleLeft="上涨5%"></Eachers>
      <div>
        <h4>同年比</h4>
        <h6>上涨5%</h6>
      </div>
    </div>
  </el-tab-pane>
  <el-tab-pane label="公司意见处">
       <editor ref="editor"></editor>
       <div style="width:100%;text-align: center;">
         <el-button @click="save" type="primary" size="50">提交</el-button>
       </div>
    </el-tab-pane>
</el-tabs>
    </div>


  </div>
</template>

<script>
import editor from 'c/Texter.vue'
export default {
  data () {
    return {
      items: [
        { value: 40, name: '生产部' },
        { value: 33, name: '人事部' },
        { value: 28, name: '财务部' },
        { value: 62, name: '销售部' },
        { value: 20, name: '技术部' },
        { value: 12, name: '管理部' },
      ],
      name: '总部',
      rad: [60, 100],
      items2: [150, 230, 224, 218, 155, 197, 260,224, 238, 235, 197, 260],
      name2: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'],
      myeditor: ''
    }
  },
  methods: {
    init () {
      this.$refs.editor.setHtml(this.myeditor)
    },
    save () {
      if(this.$refs.editor.getHtml() == ''){
        this.$message.warning('输入内容再提交!')
      }else{
         this.myeditor = this.$refs.editor.getHtml()
         this.$message.success('提交成功')
       }
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  components: {
    Eacher: () => import('c/Eacher.vue'),
    Eachers: () => import('c/Eachs2.vue'),
    editor
  }
}
</script>

<style>
</style>
